<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    div {
      width: 400px;
    }
    .header-scroll {
      position: sticky;
      top: 0;
    }
    .content {
      height: 190px;
      overflow: scroll;
      position: absolute;
    }
    .content > div {
      padding: 10px 0;
      background-color: pink;
    }
    .content .last {
      height: 500px;
      background-color: blue;
    }
  </style>
  <body>
    <div>测试测试</div>
    <div>测试测试</div>
    <div>测试测试</div>
    <div>测试测试</div>

    <div class="content">
      <div>特色推荐</div>

      <div>特色推荐</div>
      <div>特色推荐</div>
      <div>特色推荐</div>
      <div>特色推荐</div>
      <div>特色推荐</div>
      <div>特色推荐</div>
      <div>特色推荐</div>
      <div>特色推荐</div>
      <div>特色推荐</div>
      <div>特色推荐</div>
      <div>特色推荐</div>
      <div>特色推荐</div>
      <header class="header-scroll">头部</header>
      <div class="last">
        <h1>今天周二</h1>
        <h1>今天周二</h1>
        <h1>今天周二</h1>
        <h1>今天周二</h1>
        <h1>今天周二</h1>
        <h1>今天周二</h1>
        <h1>今天周二</h1>
        <h1>今天周二</h1>
        <h1>今天周二</h1>
        <h1>今天周二</h1>
        <h1>今天周二</h1>
        <h1>今天周二</h1>
      </div>
    </div>
    <svg width="250" height="250" viewBox="-50 -50 300 300">
      <polygon
        class="triangle"
        stroke-linejoin="round"
        points="100,0,0,200 200,200"
        fill="#ccc"
        stroke="#ccc"
        stroke-width="10"
      />
    </svg>
  </body>
</html>
